<template>
  <div class="bag-box">
    <el-row class="box-row">
      <!-- <z-tree
        ref="tree"
        v-model="deptList"
        varient="energy"
        node-key="id"
        @handleNodeClick="handleNodeClick"
        class="bg left"
      ></z-tree> -->
      <div class="right">
        <div class="table-box" v-if="bagFlag == 'bag'">
          <el-table :data="tableData" style="width: 100%" border height="550">
            <!-- max-height="390" -->
            <el-table-column
              prop="deptName"
              label="用能单位"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="能耗终端"
              width="180"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="address"
              label="物理地址"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="deviceName"
              label="设备名称"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
            <!-- <el-table-column
              prop=""
              label="分项类型"
              width="200"
              align="center"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                  <dict-tag
                    :options="dict.type.energy_clean_power"
                    :value="scope.row.cleanEnergys"
                    class="tag"
                  />
                </template>
            </el-table-column> -->
            <!-- <el-table-column
              prop=""
              label="使用有效期"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column> -->
            <el-table-column
              prop="deviceCode"
              label="设备编码"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop=""
              label="设备型号"
              align="center"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.device_model"
                  :value="scope.row.deviceModel"
                  class="tag"
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="cardNum"
              label="物联网卡号"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop=""
              label="信息包类型"
              align="center"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.plug_package_type"
                  :value="scope.row.plugPackageType"
                  class="tag"
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="seq"
              label="包序号"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="eventTime"
              label="事件时间"
              align="center"
              width="180"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              width="140"
              label="操作"
              align="center"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  v-hasPermi="['device:data:list']"
                  @click="handleLookDetail(scope.row.id)"
                >
                  详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- v-show="total > 0" -->
          <pagination
            :total="total"
            :page.sync="queryParams.pageNum"
            :page-sizes="[20, 40, 60, 80]"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
            class="pagination"
          />
        </div>
      </div>
    </el-row>
    <detailPop :visible.sync="show" :id="idChose"></detailPop>
  </div>
</template>

<script>
import { getPlugList } from "@/api/iot/maintenance.js";
// import zTree from "@/components/zTree";
import tRadio from "@/views/maintenance/operation/maintenance/components/bagC/tableRadio.vue";
import detailPop from "@/views/maintenance/operation/maintenance/components/bagC/detail.vue";
export default {
  components: {
    // zTree,
    tRadio,
    detailPop,
  },
  dicts: [
    "device_model", // 电表型号
    "plug_package_type", // 信息包类型
  ],
  props: {
    // 三级菜单tab钩子 number:数据包; heartbeat:心跳包; control:控制包;
    bagFlag: {
      type: String,
      default: "number",
    },
    // 查询条件
    searchParams: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      // 部门树选项
      deptList: [],
      deptId: null, // 选择的部门树的ID
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
      },
      // heartbeatRadio: "1", // 心脏包切换判断钩子
      tableData: [], // 包管理表格数据
      // numberTableData: [], // 数据包表格数据
      // heartbeatTableData: [], // 心跳包表格数据
      // controlTableData: [], // 控制包表格数据
      show: false, // 详情弹出层开关
      idChose: null,
    };
  },
  watch: {
    searchParams: {
      handler(val) {
        if (val) {
          this.getList();
        }
      },
      deep: true,
      immediate: false,
    },
    bagFlag: {
      handler(val) {
        if (val) {
          this.resetPageparams();
          this.getList();
        }
      },
      deep: false,
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    // 重置分页参数
    resetPageparams() {
      this.total = 0;
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 20;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.deptId = data.id;
      // this.handlerSearchDetail();
    },
    // // 心跳包表头切换
    // changeRadio(val) {
    //   // console.log(val);
    //   this.heartbeatRadio = val;
    // },
    // 查看详情
    handleLookDetail(id) {
      this.idChose = id;
      setTimeout(() => {
        this.show = true;
      }, 200);
    },
    // 查询表格信息
    getList() {
      let params = {};
      // serach里面重置是赋值为空，不是null，所以参数null传递得在这里处理
      if (this.searchParams.alarmType == "" || !this.searchParams.alarmType) {
        this.searchParams.alarmType = null;
      }
      if (
        this.searchParams.plugPackageType == "" ||
        !this.searchParams.plugPackageType
      ) {
        this.searchParams.plugPackageType = null;
      }
      params = { ...this.searchParams, ...this.queryParams };
      // console.log(params, "qqcs");
      this.$store.commit("app/updateApiCount", "add");
      getPlugList(params)
        .then((res) => {
          this.$store.commit("app/updateApiCount");
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          // console.log(res, "list");
          this.tableData = res?.rows ?? [];
          this.total = res?.total ?? 0;
        })
        .catch((err) => {
          this.$store.commit("app/updateApiCount");
          // this.$message.error("系统错误,请联系管理员!200200");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";
::v-deep .el-table__body-wrapper {
  @include scrollBar2;
}
.pagination {
  background-color: rgba($color: #000000, $alpha: 0);
}
.bag-box {
  width: 100%;
  ::v-deep .box-row {
    margin-top: 20px;
    display: flex;
    // .left {
    //   width: 220px;
    //   max-height: 500px;
    //   margin-right: 20px;
    //   overflow: auto;
    //   @include scrollBar2;
    // }
    .right {
      flex: 1;
      width: 100%;
      height: 520px;
      // overflow: auto;
      // @include scrollBar2;
    }
  }
}
.header-content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
</style>
